<template>
  <div class="login-box">

    <div class="am-tabs"
         id="doc-my-tabs">
      <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
        <li class="am-active"><a href="javascript:;">邮箱注册</a></li>
        <li><a href="javascript:;">手机号注册</a></li>
      </ul>

      <div class="am-tabs-bd"
           style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <div class="am-tab-panel am-active">
          <form onsubmit="return false;">

            <div class="user-email">
              <label for="email"><i class="am-icon-envelope-o"></i></label>
              <input type="email"
                     name=""
                     id="email"
                     placeholder="请输入邮箱账号"
                     v-model="email">
            </div>
            <div class="user-pass">
              <label for="password"><i class="am-icon-lock"></i></label>
              <input type="password"
                     name=""
                     id="password"
                     placeholder="设置密码"
                     v-model="password">
            </div>
            <div class="user-pass">
              <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
              <input type="password"
                     name=""
                     id="passwordRepeat"
                     placeholder="确认密码"
                     v-model="passwordRepeat">
            </div>

          </form>

          <div class="login-links">
            <label for="reader-me">
              <input id="reader-me"
                     type="checkbox"> 点击表示您同意商城《服务协议》
            </label>
          </div>
          <div class="am-cf">
            <input type="submit"
                   name=""
                   value="注册"
                   class="am-btn am-btn-primary am-btn-sm am-fl">
          </div>

        </div>

        <div class="am-tab-panel">
          <form onsubmit="return false;">
            <div class="user-phone">
              <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
              <input type="tel"
                     name=""
                     id="phone"
                     placeholder="请输入手机号"
                     v-model="phone">
            </div>
            <div class="verification">
              <label for="code"><i class="am-icon-code-fork"></i></label>
              <input type="tel"
                     name=""
                     id="code"
                     placeholder="请输入验证码"
                     v-model="verifyCode">
              <a class="btn"
                 href="javascript:void(0);"
                 id="sendMobileCode"
                 @click="sendMobileCode">
                <span id="dyMobileButton">获取</span></a>
            </div>
            <div class="user-pass">
              <label for="password"><i class="am-icon-lock"></i></label>
              <input type="password"
                     name=""
                     id="password"
                     placeholder="设置密码"
                     v-model="password">
            </div>
            <div class="user-pass">
              <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
              <input type="password"
                     name=""
                     id="passwordRepeat"
                     placeholder="确认密码"
                     v-model="passwordRepeat">
            </div>
          </form>
          <div class="login-links">
            <label for="reader-me">
              <input id="reader-me"
                     type="checkbox"
                     v-model="argeeLesense"> 点击表示您同意商城《服务协议》
            </label>
          </div>
          <div class="am-cf">
            <input type="submit"
                   name=""
                   value="注册"
                   class="am-btn am-btn-primary am-btn-sm am-fl"
                   @click="register">
          </div>

          <hr>
        </div>

        <!--<script>
        $(function() {
          $('#doc-my-tabs').tabs();
        })
        </script>-->

      </div>
    </div>

  </div>
</template>

<script>
// import $ from 'jquery'

export default {
  name: 'RegisterForm',
  mounted () {
    this.$('#doc-my-tabs').tabs()
  },
  data () {
    return {
      registerType: 'email',
      email: '',
      phone: '',
      verifyCode: '',
      password: '',
      passwordRepeat: '',
      argeeLesense: true
    }
  },
  methods: {
    register: () => {
      alert(`${this.username} - ${this.password}`)
    },
    sendMobileCode: () => {

    }
  }
}
</script>
